<template>
	<u-popup :show="showUser" :closeable="closeable" mode="bottom" @close="closeUser">
		<view class="title">
			{{title}}
		</view>
		<scroll-view scroll-y="true" @scrolltolower="loadmore" class="actionheight"
			v-if="showUserList && showUserList.length>0">
			<u-checkbox-group v-model="checkboxValue1" placement="column">
				<u-checkbox class="item" v-for="(item, index) in showUserList" :key="index" :label="item.nickName"
					:name="item.userId">
				</u-checkbox>
			</u-checkbox-group>
		</scroll-view>
		<view class="footer" @click="close">确定</view>
	</u-popup>
</template>

<script>
	import {
		getUserList
	} from '@/api/common.js'
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			showUser: {
				type: Boolean,
				default: false
			},
			deptId: {
				type: String,
				default: ''
			},
			checkboxValue: {
				type: Array,
				default: () => []
			},
			userList: {},

		},

		data() {
			return {
				closeable: true,
				// userList:[],
				checkboxValue1: [],
				showUserList: [],
			}
		},
		mounted() {
			// this.showUserList = this.userList && this.userList.length > 20 ? this.userList.slice(0, 20) : [...this
			// 	.userList
			// ]
			// console.log(this.showUserList, 11)
		},

		methods: {
			loadmore() {
				if (this.showUserList.length === this.userList.length) {
					return
				}
				this.getShowList()
			},
			getShowList() {
				const endIndex = Number(this.showUserList.length) + 20
				const newArr = this.userList.slice(0, endIndex)
				this.showUserList = [...newArr]
			},
			close() {
				let str = ''
				if (this.checkboxValue1.length > 0) {
					let userNames = []
					const newList = this.userList.filter((item) =>
						this.checkboxValue1.includes(item.userId)
					);
					for (let i = 0; i < newList.length; i++) {
						userNames.push(newList[i].nickName)
					}
					str = userNames.toString()

				} else {
					str = ''
				}

				this.$emit('changeItem', str, this.checkboxValue1)
			},
			closeUser() {
				this.$emit('closeUser')
			},
			// /** 查询人员 */
			// getUsers() {
			// 	getUserList({
			// 		deptId:this.deptId
			// 	}).then(response => {
			// 		const {
			// 			rows
			// 		} = response
			// 		this.userList = rows || []
			// 	})

			// },

		},
		watch: {
			showUser(val) {
				if (val) {
					this.checkboxValue1 = this.checkboxValue
				}
			},
			userList(val) {
				if (val && val.length > 0) {
					this.showUserList = this.userList && this.userList.length > 20 ? this.userList.slice(0, 20) : [...this
						.userList
					]
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 32rpx;
		color: #303133;
		font-weight: bold;
		text-align: center;
		padding: 24rpx 60rpx
	}

	.actionheight {
		height: 60vh;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1rpx solid #F5F7F9;
			font-size: 30rpx;
			padding: 30rpx 0;

			&:last-child {
				border-bottom: 1rpx solid #F5F7F9;
			}
		}
	}

	.footer {
		width: 686rpx;
		height: 104rpx;
		background: #407FFF;
		border-radius: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: fixed;
		// bottom: 118rpx;
		// left: 38rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin: 0 auto;

	}
</style>
